<template>
  <!-- 实操 -->
  <div class="operationView">
    <navBar :title="false" />
    <div class="operation_content">
      <div class="operation_center">
        <div class="left_content">
          <div class="left_tips">
            温馨提示：叫到名字的考生，请到指定考车上进行考试！
          </div>
          <div class="left_info">
            <div class="info_title">
              <div>考车号</div>
              <span>|</span>
              <div>
                <img src="../assets/operation/texting.png" alt="" />
                <span>正在考试</span>
              </div>
              <span>|</span>
              <div>
                <img src="../assets/operation/wait.png" alt="" />
                <span>等待上车</span>
              </div>
            </div>
            <div
              class="info_message"
              v-for="(value, index) in GetStuQueen"
              :key="index"
            >
              <div>{{ value.kch }}号车</div>
              <span>|</span>
              <div>{{ value.zkName }}({{ maskIdCard(value.zkSfzh) }})</div>
              <span>|</span>
              <div>{{ value.hkName }}({{ maskIdCard(value.hkSfzh) }})</div>
            </div>
          </div>
        </div>
        <div class="right_content">
          <div class="content_tips">
            <div>排队等候考生</div>
          </div>
          <div class="content_title">
            <span>姓名</span>

            <span>状态 </span>
          </div>
          <div
            class="content_message"
            v-for="(value, index) in GetWaitStus"
            :key="index"
          >
            <span>{{ value.xm }}({{ maskIdCard(value.sfzmhm) }})</span>

            <span>候考 </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navBar from "../components/navBar.vue";
import $api from "../untils/api.js";
export default {
  data() {
    return {
      GetStuQueen: [],
      GetWaitStus: [],
    };
  },
  components: {
    navBar,
  },
  created() {
    this.getstateAsync();
    this.GetStuQueenAsync();
    this.GetWaitStusAsync();
  },
  mounted() {},
  computed: {},
  methods: {
    maskIdCard(idCard) {
      if (idCard) {
        return "****" + idCard.slice(-4);
      }
    },
    getstateAsync() {
      $api.GetStuQueenAsync({}).then((res) => {
        if (res.data.data) {
          this.GetStuQueen = res.data.data[0];
        }
      });
      $api.GetWaitStusAsync({}).then((res) => {
        if (res.data.data) {
          this.GetWaitStus = res.data.data;
        }
      });
    },
    GetStuQueenAsync() {
      setInterval(() => {
        $api.GetStuQueenAsync({}).then((res) => {
          console.log(res.data.data);
          if (res.data.data) {
            this.GetStuQueen = res.data.data;
          }
        });
      }, 30000);
    },
    GetWaitStusAsync() {
      setInterval(() => {
        $api.GetWaitStusAsync({}).then((res) => {
          console.log(res);
          if (res.data.data) {
            this.GetWaitStus = res.data.data;
          }
        });
      }, 30000);
    },
  },
};
</script>

<style lang="scss" scoped>
.operationView {
  width: 100%;
  height: 100vh; /* 使用100%的视口高度 */
  background-image: url(../assets/operation/car.png);
  background-position: center; /* 背景图居中显示 */
  background-repeat: no-repeat; /* 不重复背景图 */
  background-size: cover; /* 背景图覆盖整个容器 */
  text-align: center;
  overflow: auto;
  .operation_content {
    padding: 0 0.4rem 0.4rem 0.4rem;
    .operation_center {
      display: flex;
      justify-content: space-between;
      margin-top: 0.32rem;
      .left_content {
        .left_tips {
          width: 13.59rem;
          height: 0.72rem;
          background-color: #0d142b;
          color: #ff8f1f;
          font-size: 0.28rem;
          line-height: 0.72rem;
          text-align: center;
          margin-bottom: 0.26rem;
        }
        .left_info {
          overflow: hidden;
          width: 13.59rem;
          height: 8.42rem;
          background-color: rgba($color: #1f2841, $alpha: 0.6);
          .info_title {
            display: flex;
            align-items: center;
            width: 100%;
            height: 1.54rem;
            // background-color: rgba($color: #0094ff, $alpha: .6);
            background-image: linear-gradient(to bottom, #0094ff, #0d142b);
            opacity: 0.6;
            & > span {
              color: #c0ddff;
              font-size: 0.6rem;
            }
            & > div:nth-of-type(1) {
              width: 2.85rem;
              height: 1.54rem;
              line-height: 1.54rem;
              color: #00eeff;
              font-size: 0.36rem;
              font-weight: bold;
            }
            & > div:nth-of-type(2) {
              width: 5.36rem;
              color: #029800;
            }
            & > div:nth-of-type(3) {
              width: 5.3rem;
              color: #ff8f1f;
            }
            & > div:nth-of-type(2),
            & > div:nth-of-type(3) {
              font-size: 0.36rem;
              font-weight: bold;
              display: flex;
              align-items: center;
              justify-content: center;
              img {
                width: 0.57rem;
                height: 0.57rem;
                margin-right: 0.38rem;
              }
            }
          }
          .info_message {
            display: flex;
            align-items: center;
            width: 100%;
            height: 1.32rem;
            color: #ffffff;
            font-size: 0.36rem;
            font-weight: bold;
            border-bottom: 0.03rem solid #c3bcbc;
            & > span {
              color: #c0ddff;
              font-size: 0.6rem;
            }
            & > div:nth-of-type(1) {
              width: 2.85rem;
              height: 1.54rem;
              line-height: 1.54rem;
              font-size: 0.36rem;
              font-weight: bold;
            }
            & > div:nth-of-type(2) {
              width: 5.36rem;
            }
            & > div:nth-of-type(3) {
              width: 5.3rem;
            }
          }
        }
      }
      .right_content {
        width: 4.52rem;
        height: 9.4rem;
        overflow: hidden;
        .content_tips {
          width: 100%;
          height: 0.5rem;
          line-height: 0.5rem;
          display: flex;
          align-items: center;
          background-image: url(../assets/theory/bar.png);
          background-size: 100% 100%;
          & > div {
            color: #ffffff;
            font-size: 0.24rem;
            margin-left: 0.45rem;
          }
        }
        .content_title {
          width: 100%;
          height: 0.5rem;
          color: #ffffff;
          font-size: 0.2rem;
          display: flex;
          justify-content: space-around;
          align-items: center;
          & > span:nth-of-type(1) {
            margin-left: 0.35rem;
          }
          & > span:nth-of-type(2) {
            margin-left: 2rem;
          }
          & > span:nth-of-type(3) {
            margin-left: 0.6rem;
          }
        }
        .content_message {
          // width: 100%;
          height: 0.64rem;
          border: 0.02rem solid #29fac9;
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding: 10px;
          & > span:nth-of-type(1) {
            color: #ffffff;
            font-size: 0.24rem;
            margin-right: 30px;
          }
          & > span:nth-of-type(2) {
            color: #ff8f1f;
            font-size: 0.24rem;
          }
          // & > span:nth-of-type(3) {
          //   color: #ff8f1f;
          //   font-size: 0.24rem;
          // }
        }
      }
    }
  }
}
</style>
